<html>
    <head>
        <style>
            body {
              max-width: 600px;
              margin: 50px auto;
              font-family: Arial;
              font-size: 15px;
              line-height: 1.5em;
            }
            .tip {
              font-size: .8em;
            }
        </style>
    </head>
    <body>

<h1>Free Transform UI plugin</h1>

<p>The Free Transfrom plugin creates a control panel above an element giving an user ability to resize the element in any direction or rotate it.</p>

<h2>Install</h2>

<p>Add <code>joint.ui.freetransform.css</code> and <code>joint.ui.freetransform.js</code> files to your HTML:<p>
<pre><code>
&lt;link rel="stylesheet" type="text/css" href="joint.ui.freetransform.css" /&gt;
&lt;script src="joint.ui.freetransform.js"&gt;&lt;/script&gt;
</code></pre>

<h2>Create a free transform</h2>
<pre><code>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({

    el: $('#paper'),
    width: 500,
    height: 500,
    gridSize: 1,
    model: graph
});

paper.on('cell:pointerup', function(cellView) {

    // We don't want to transform links.
    if (cellView.model instanceof joint.dia.Link) return;   

    var freetransform = new joint.ui.FreeTransform({

        graph: graph,
        paper: paper,
        cellView: cellView
    });

    freetransform.render();
});
</code></pre>

<p>The <code>joint.ui.FreeTransform</code> constructor takes a graph, paper objects and the view of a cell we want to display the control panel above.</p>
